<template>
    <div class="alarmCenter_right">
        <div class="boxTitle">
            <img src="@/assets/images/home/rightIcon.png" alt="">
            <span class="title">历史数据统计</span>
        </div>
        <div class="navBar">
            <div class="navBar_left">
                <span class="left_item" :class="{ 'left_active': navIndex == 0 }" @click="changeIndex(0)">日</span>
                <span class="left_item" :class="{ 'left_active': navIndex == 1 }" @click="changeIndex(1)">周</span>
                <span class="left_item" :class="{ 'left_active': navIndex == 2 }" @click="changeIndex(2)">月</span>
                <span class="left_item" :class="{ 'left_active': navIndex == 3 }" @click="changeIndex(3)">年</span>
            </div>
            <div class="navBar_right"
                :class="{ 'navBar_week': navIndex == 1, 'navBar_moth': navIndex == 2, 'navBar_year': navIndex == 3 }">
                <template v-if="navIndex == 0">
                    <el-date-picker v-model="valueDay" type="date" placeholder="请选择日期" />
                </template>
                <template v-else-if="navIndex == 1">
                    <el-date-picker v-model="valueWeek" type="week" format="[Week] ww" placeholder="请选择周" />
                </template>
                <template v-else-if="navIndex == 2">
                    <el-date-picker v-model="valueMonth" type="month" placeholder="请选择月份" />
                </template>
                <template v-else>
                    <el-date-picker v-model="valueYear" type="year" placeholder="请选择年份" />
                </template>
            </div>

        </div>
        <div class="alarm_item alarmNum">
            <div class="status_title">
                <img class="historyData_icon" src="@/assets/images/dailyMaintenance/historyData_icon.png" alt="">
                <span class="title_text">报警次数趋势图</span>
            </div>
            <barChart_alarmNum :data="chartData.data"></barChart_alarmNum>
        </div>
        <div class="alarm_item">
            <div class="status_title">
                <img class="historyData_icon" src="@/assets/images/dailyMaintenance/historyData_icon.png" alt="">
                <span class="title_text">报警类型趋势图</span>
                <div class="alarm_explain">
                    <div class="explain_item">
                        <div class="explain_level"></div>
                        <span>一般</span>
                    </div>
                    <div class="explain_item">
                        <div class="explain_level level_urgency"></div>
                        <span>紧急</span>
                    </div>
                    <div class="explain_item ">
                        <div class="explain_level level_critical"></div>
                        <span>危急</span>
                    </div>
                </div>
            </div>
            <lineChar_alarmType :data="chartData.data_type"></lineChar_alarmType>
        </div>
        <div class="alarm_item">
            <div class="status_title">
                <img class="historyData_icon" src="@/assets/images/dailyMaintenance/historyData_icon.png" alt="">
                <span class="title_text">误报次数趋势图</span>
            </div>
            <lineChar_misstatement :data="chartData.data_miss"></lineChar_misstatement>
        </div>
        <div class="alarm_item">
            <div class="status_title">
                <img class="historyData_icon" src="@/assets/images/dailyMaintenance/historyData_icon.png" alt="">
                <span class="title_text">各系统报警趋势图</span>
            </div>
            <pieChar_system :data="chartData.data_system"></pieChar_system>
        </div>
    </div>
</template>

<script setup lang="ts">
import barChart_alarmNum from "./barChart_alarmNum.vue";
import lineChar_alarmType from "./lineChar_alarmType.vue";
import lineChar_misstatement from "./lineChar_misstatement.vue";
import pieChar_system from "./pieChar_system.vue";

let navIndex = ref(0);

let valueDay = ref("");
let valueWeek = ref("");
let valueMonth = ref("");
let valueYear = ref('');

const changeIndex = (index: number) => {
    if (navIndex.value != index) {
        navIndex.value = index;
    }
}

let chartData = reactive({
    data: [
        { date: '1', value: 150 },
        { date: '2', value: 210 },
        { date: '3', value: 135 },
        { date: '4', value: 480 },
        { date: '5', value: 360 },
        { date: '6', value: 160 },
        { date: '7', value: 290 },
        { date: '8', value: 410 },
        { date: '9', value: 190 },
        { date: '10', value: 290 },
        { date: '11', value: 380 },
        { date: '12', value: 168 },
    ],
    data_type: {
        type01: [
            { date: '1', value: 150 },
            { date: '2', value: 210 },
            { date: '3', value: 135 },
            { date: '4', value: 280 },
            { date: '5', value: 360 },
            { date: '6', value: 260 },
            { date: '7', value: 190 },
            { date: '8', value: 210 },
            { date: '9', value: 190 },
            { date: '10', value: 290 },
            { date: '11', value: 280 },
            { date: '12', value: 168 },
        ],
        type02: [
            { date: '1', value: 50 },
            { date: '2', value: 70 },
            { date: '3', value: 65 },
            { date: '4', value: 180 },
            { date: '5', value: 60 },
            { date: '6', value: 60 },
            { date: '7', value: 90 },
            { date: '8', value: 110 },
            { date: '9', value: 190 },
            { date: '10', value: 90 },
            { date: '11', value: 180 },
            { date: '12', value: 68 },
        ],
        type03: [
            { date: '1', value: 30 },
            { date: '2', value: 60 },
            { date: '3', value: 135 },
            { date: '4', value: 80 },
            { date: '5', value: 60 },
            { date: '6', value: 90 },
            { date: '7', value: 73 },
            { date: '8', value: 82 },
            { date: '9', value: 91 },
            { date: '10', value: 70 },
            { date: '11', value: 56 },
            { date: '12', value: 46 },
        ],
    },
    data_miss: [
        { date: '1', value: 150 },
        { date: '2', value: 210 },
        { date: '3', value: 135 },
        { date: '4', value: 480 },
        { date: '5', value: 360 },
        { date: '6', value: 160 },
        { date: '7', value: 290 },
        { date: '8', value: 410 },
        { date: '9', value: 190 },
        { date: '10', value: 290 },
        { date: '11', value: 380 },
        { date: '12', value: 168 },
    ],
    data_system: [
        { value: '267', name: '锅炉系统' },
        { value: "105", name: '汽机系统' },
        { value: "151", name: '公用系统' },
        { value: "102", name: '烟气系统' }
    ],
})
</script>

<style lang="scss" scoped>
.alarmCenter_right {
    position: absolute;
    z-index: 999;
    background: url(@/assets/images/dailyMaintenance/r-bg-01.png) no-repeat;
    background-size: 100% 100%;
    right: vh(21);
    top: vh(61);
    width: vh(421);
    height: vh(909);
    font-size: vh(14);
    color: #FFFFFF;

    .navBar {
        display: flex;
        align-items: center;
        padding: vh(15) vh(14) 0;
        justify-content: flex-end;

        .navBar_left {
            display: flex;

            .left_item {
                margin-right: vh(16);
                font-family: Source Han Sans CN;
                font-weight: 500;
                font-size: vh(12);
                color: #FFFFFF;
                cursor: pointer;

                &.left_active {
                    color: #00E3FE;
                }
            }
        }

        .navBar_right {
            width: vh(120);

            // &.navBar_year {
            //     width: vh(100);
            // }

            :deep(.el-input) {
                width: 100%;
                height: vh(19);
            }
        }
    }

    .alarm_item {
        padding: 0 vh(14) 0 vh(19);
        margin-top: vh(12);
        // &.alarmNum {
        //     margin-top: vh(12);
        // }

        .status_title {
            font-family: Source Han Sans CN;
            font-weight: 500;
            font-size: vh(14);
            color: #FFFFFF;
            line-height: 1;
            display: flex;
            align-items: center;

            .historyData_icon {
                margin-right: vh(10);
                vertical-align: sub;
            }

            .title_text {
                flex: 1;
            }

            .alarm_explain {
                width: vh(175);
                display: flex;
                justify-content: space-around;

                .explain_item {
                    display: flex;
                    align-items: center;


                    .explain_level {
                        width: vh(8);
                        height: vh(8);
                        background: #00E3FE;
                        border-radius: 50%;
                        margin-right: vh(9);

                        &.level_urgency {
                            background: #FF6B22;
                        }

                        &.level_critical {
                            background: #FF5757;
                        }
                    }
                }
            }
        }
    }
}
</style>
